<template>
  <Teleport to="body">
    <TransitionGroup name="toast" tag="div" class="fixed top-4 right-4 z-50 space-y-2">
      <div
        v-for="toast in toasts"
        :key="toast.id"
        :class="[
          'toast-item flex items-center p-4 rounded-lg shadow-lg border-l-4 min-w-80 max-w-md',
          getToastClasses(toast.type),
        ]"
      >
        <!-- 图标 -->
        <div class="flex-shrink-0 mr-3">
          <Icon :name="getToastIcon(toast.type)" size="20" :class="getIconClasses(toast.type)" />
        </div>

        <!-- 内容 -->
        <div class="flex-1">
          <p class="text-sm font-medium" :class="getTextClasses(toast.type)">
            {{ toast.message }}
          </p>
        </div>

        <!-- 关闭按钮 -->
        <button
          @click="removeToast(toast.id)"
          class="flex-shrink-0 ml-3 text-gray-400 hover:text-gray-600 transition-colors"
        >
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M6 18L18 6M6 6l12 12"
            ></path>
          </svg>
        </button>
      </div>
    </TransitionGroup>
  </Teleport>
</template>

<script>
import { onMounted, onUnmounted, ref } from 'vue'
import Icon from './icons/Icon.vue'

export default {
  name: 'Toast',
  components: {
    Icon,
  },
  setup() {
    const toasts = ref([])
    let toastId = 0

    const getToastClasses = (type) => {
      const baseClasses = 'bg-white border'

      switch (type) {
        case 'success':
          return `${baseClasses} border-green-200 border-l-green-500`
        case 'error':
          return `${baseClasses} border-red-200 border-l-red-500`
        case 'warning':
          return `${baseClasses} border-yellow-200 border-l-yellow-500`
        case 'info':
          return `${baseClasses} border-blue-200 border-l-blue-500`
        default:
          return `${baseClasses} border-gray-200 border-l-gray-500`
      }
    }

    const getIconClasses = (type) => {
      switch (type) {
        case 'success':
          return 'text-green-500'
        case 'error':
          return 'text-red-500'
        case 'warning':
          return 'text-yellow-500'
        case 'info':
          return 'text-blue-500'
        default:
          return 'text-gray-500'
      }
    }

    const getTextClasses = (type) => {
      switch (type) {
        case 'success':
          return 'text-green-800'
        case 'error':
          return 'text-red-800'
        case 'warning':
          return 'text-yellow-800'
        case 'info':
          return 'text-blue-800'
        default:
          return 'text-gray-800'
      }
    }

    const getToastIcon = (type) => {
      switch (type) {
        case 'success':
          return 'check-circle'
        case 'error':
          return 'x-circle'
        case 'warning':
          return 'alert-triangle'
        case 'info':
          return 'info'
        default:
          return 'bell'
      }
    }

    const addToast = (message, type = 'info', duration = 5000) => {
      const id = ++toastId
      const toast = {
        id,
        message,
        type,
        duration,
      }

      toasts.value.push(toast)

      // 自动移除
      if (duration > 0) {
        setTimeout(() => {
          removeToast(id)
        }, duration)
      }

      return id
    }

    const removeToast = (id) => {
      const index = toasts.value.findIndex((toast) => toast.id === id)
      if (index > -1) {
        toasts.value.splice(index, 1)
      }
    }

    const clearAll = () => {
      toasts.value = []
    }

    // 暴露方法给全局使用
    const showSuccess = (message, duration) => addToast(message, 'success', duration)
    const showError = (message, duration) => addToast(message, 'error', duration)
    const showWarning = (message, duration) => addToast(message, 'warning', duration)
    const showInfo = (message, duration) => addToast(message, 'info', duration)

    // 挂载到全局
    onMounted(() => {
      window.$toast = {
        show: addToast,
        success: showSuccess,
        error: showError,
        warning: showWarning,
        info: showInfo,
        remove: removeToast,
        clear: clearAll,
      }
    })

    onUnmounted(() => {
      delete window.$toast
    })

    return {
      toasts,
      addToast,
      removeToast,
      clearAll,
      getToastClasses,
      getIconClasses,
      getTextClasses,
      getToastIcon,
    }
  },
}
</script>

<style scoped>
.toast-enter-active,
.toast-leave-active {
  transition: all 0.3s ease;
}

.toast-enter-from {
  opacity: 0;
  transform: translateX(100%);
}

.toast-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.toast-move {
  transition: transform 0.3s ease;
}

/* 响应式设计 */
@media (max-width: 640px) {
  .toast-item {
    min-width: calc(100vw - 2rem);
    max-width: calc(100vw - 2rem);
  }
}
</style>
